<template>
  <div class="table-tree">
    <table-item v-for="item in dataSource" :item="item" :keys="keys" :key="item.key" @on-click="onClick"/>
  </div>
</template>

<script>
    import TableItem from './TableItem.vue'

    export default {
        name: 'table-tree',
        components: { TableItem },
        props: {
            dataSource: {
                type: Array,
                default: function () {
                    return []
                }
            },
            keys: {
                type: Array,
                default: function () {
                    return []
                }
            }
        },
        data () {
            return {
                selects: new Set([...this.keys])
            };
        },
        methods: {
            onClick (state, value) {
                if (state) {
                    this.selects.add(value)
                } else {
                    this.selects.delete(value)
                }
                this.$emit('change', this.selects.values());
            }
        }
    }
</script>

<style scoped>
  .table-tree{border: 1px solid #e5e5e5; border-bottom: 0;}
</style>
